<template>
  <div>
    <Editor
      id="textEditor"
      :init="initConfig"
    />
  </div>
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue';
import { computed, onMounted, reactive, watch } from 'vue';
import showMessageTip from '@/utils/showMessage';

const props = defineProps(['articleData']);
const emit = defineEmits(['getData']);
const articleData = computed(() => props.articleData);


const initConfig = reactive({
    plugins: 'lists image table wordcount searchreplace charmap emoticons insertdatetime',
    license_key: 'gpl',
    language: 'zh_CN',
    branding: false,
    height: '53vh',
    width:'78vw',
    content_style: "img {max-width:100%;}",
    image_advtab: true,
    automatic_uploads: true,
    toolbar: 'undo redo | bold italic forecolor fontsizeinput | styles alignleft aligncenter alignright alignjustify |  image | indent outdent',
    menubar: 'edit format insert table',
    menu: {
      edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext selectall | searchreplace' },
      format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | removeformat' },
      insert: { title: 'Insert', items: 'image emoticons charmap insertdatetime inserttable hr' },
      table: { title: 'Table', items: 'inserttable | cell row column tableprops deletetable' },
    },
    file_picker_types: 'image',
    file_picker_callback: async function(callback, value, meta) {
      if(meta.filetype == 'image'){
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.onchange = async (e)=>{
          const file = e.target.files[0];
          if (!file.type.startsWith('image/')) {
              showMessageTip('不支持的文件格式', 'warning');
              return;
          }
          else if (!(file.size / 1024 / 1024 < 4)) {
              showMessageTip('文件不能大于4M', 'warning')
              return;
          }
          let url = await imgToUrl(file);
          if(url != null){
            callback(url);
          }
        }
        input.click();
      }
    },
    setup: function (editor) {
    editor.on('init', function (e) {
      tinymce.get('textEditor').setContent(articleData.value);
    });
  }
})

const imgToUrl = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      resolve(event.target.result); // 返回Base64URL
    };
    reader.onerror = (error) => {
      reject(new Error('文件读取错误' + error));
    };
    reader.readAsDataURL(file);
  });
}

watch(articleData, () => {
  tinymce.get('textEditor').setContent(articleData.value);
});
</script>
<script>
export const getAllText = () => {
  let data = tinymce.get('textEditor').getContent();
  return data;
}
</script>
<style>
.tox-tinymce-aux{
  z-index:9999 !important;
}
.tinymce.ui.FloatPanel{
  z-Index: 99;
}
</style>

<style scoped>
:deep(.tox-promotion-link) {
  display: none !important;
}
</style>